<template>
  <div>
    <van-nav-bar style="background-color: #4fc08d;" id="reset" left-text="返回"
    @click-left="back" title="登录"></van-nav-bar>
    <van-cell-group>
      <van-field  v-model="username"  clearable  :error-message="usernamemsg" label="用户名:" placeholder="请输入用户名" />
      <van-field v-model="password" clearable :error-message="passwordmsg" type="password" label="密码:" placeholder="请输入密码" />
    </van-cell-group>
    <van-button type="primary" @click="login"  size="large" text="登录" style="border-radius:5px;"></van-button>
  </div>
</template>
<script>
export default {
    data(){
        return{
            username : "",
            password : "",
            usernamemsg:"",
            passwordmsg:"",
        }
    },
    methods:{
      back(){
            this.$router.push('/me')
        },
        login(){
            let param=`name=${this.username}&password=${this.password}`
            this.axios.post('/login',param) .then((result) => {
                        console.log(result)
                        if(result.data.code==200){
                            this.$messagebox('登录成功')
                            //调用mutation更新登录状态
                            let user=result.data.result
                            this.$store.commit("updateLoginState",user)
                            sessionStorage.setItem('islogin',1)
                            sessionStorage.setItem('user',JSON.stringify(user))
                            this.$router.push('/')
                            }else{
                                 this.$messagebox('登录失败','用户不存在,请输入正确的用户名或密码')
                            }
                            
                    });  
        }
    }
}
</script>

<style scoped>
#reset /deep/ .van-ellipsis{
		color: white !important;
}
#reset /deep/ .van-nav-bar__text{
		color: white !important;
}
</style>